{% extends 'base.html' %}

{% block title %}视频预警展示{% endblock %}

{% block head %}
    <style> /* 自定义 CSS 样式 */
    #commentsContainer {
        margin-top: 20px;
    }

    .comment {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ddd;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background-color: #f9f9f9;
        transition: all 0.3s ease;
    }

    .comment:hover {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        background-color: #f0f0f0;
    }


    tr:hover {
        background-color: #e5e5e5;
    }

    .modal-content {
        background-color: #fefefe;
        margin: 10% auto;
        padding: 60px;
        border: 1px solid #888;
        width: 80%;
        max-height: 80%;
        overflow-y: auto;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }

    .close {
        color: #aaaaaa;
        float: right;
        font-size: 38px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    </style>
{% endblock %}

{% block body %}
    <div style="text-align: center;">
        <h1>预警详情</h1>
        <ul>
            <li>视频标题: {{ video_detail['video_name'] }}</li>
            <li>视频发布时间: {{ video_detail['pubdate'] }}</li>
            <li>视频浏览量: {{ video_detail['views'] }}</li>
            <li>评论数: {{ video_detail['comment_count'] }}</li>
            <li>歧视评论数: {{ video_detail['violence_count'] }}</li>
            <li>讽刺评论数: {{ video_detail['sarcasm_count'] }}</li>

            <!-- 添加其他视频详情信息 -->
        </ul>
        {% if video_detail.is_banned %}
            <button onclick="unbanVideo()">解封视频</button>
        {% else %}
            <button onclick="banVideo()">封禁视频</button>
        {% endif %}

        <div style="margin-top: 20px;"> <!-- 可以调整按钮和视频详情之间的距离 -->
            <button onclick="showComments('get_violence_comments')">查看涉及歧视评论</button>
            <button onclick="showComments('get_sarcasm_comments')">查看涉及讽刺评论</button>
            <button onclick="showComments('get_did_violence_comments')">查看综合确认网络暴力评论</button>
            <button onclick="showComments('get_banned_comments')">查看已封禁评论</button>
        </div>
    </div>

    <div id="commentsContainer">
        <!-- 这里将用于展示评论 -->
    </div>

    <div class="container" style="display: flex;">
        <div id="pie1" style="flex: 1; margin-right: 10px; width: 500px; height: 300px;"></div>
        <div id="pie2" style="flex: 1; margin-left: 10px; width: 500px; height: 300px;"></div>
    </div>


    <div id="nobanModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <button onclick="banAllComments()">一键封禁</button> <!-- 添加一键封禁按钮 -->
            <table>
                <thead>
                <tr>
                    <th>评论内容</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="modalnobanComments">
                <!-- 这里将用于展示模态框中的评论 -->
                </tbody>
            </table>
        </div>
    </div>

    <div id="banModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closebanModal()">&times;</span>
            <button onclick="unbanAllComments()">一键解封</button> <!-- 添加一键封禁按钮 -->
            <table>
                <thead>
                <tr>
                    <th>评论内容</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="modalbanComments">
                <!-- 这里将用于展示模态框中的评论 -->
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script> // 显示模态框

    // 获取当前展示的评论类别
    let commentCategory = '';

    $(function () {
        $.ajax({
            type: "GET",
            url: "/comment/all_gender_pie/{{ video_detail.bvid }}",
            dataType: 'json',
            success: function (result) {
                echarts.init(document.getElementById('pie1'), 'white', {renderer: 'canvas'}).setOption(result);
            }
        });
        $.ajax({
            type: "GET",
            url: "/comment/violence_gender_pie/{{ video_detail.bvid }}",
            dataType: 'json',
            success: function (result) {
                echarts.init(document.getElementById('pie2'), 'white', {renderer: 'canvas'}).setOption(result);
            }
        });
    })


    function showModal(comments) {
        var modalComments = document.getElementById("modalnobanComments");
        modalComments.innerHTML = "";
        comments.forEach(function (comment) {
            var tr = document.createElement("tr");

            // 添加评论内容
            var tdContent = document.createElement("td");
            tdContent.textContent = comment.content.length > 100 ? comment.content.substring(0, 100) + "..." : comment.content;
            tdContent.title = comment.content;
            tr.appendChild(tdContent);

            // 添加封禁按钮
            var tdAction = document.createElement("td");
            var banButton = document.createElement("button");
            banButton.textContent = "封禁";
            banButton.className = "ban-button";
            banButton.onclick = function () {
                banComment(comment.id);
            };
            tdAction.appendChild(banButton);
            tr.appendChild(tdAction);

            modalComments.appendChild(tr);
        })
        ;
        var modal = document.getElementById("nobanModal");
        modal.style.display = "block";
    }

    // 隐藏模态框
    function closeModal() {
        var modal = document.getElementById("nobanModal");
        modal.style.display = "none";
    }

    // 点击按钮显示对应类型的评论
    function showComments(commentType) {
        $.ajax({
            type: 'GET',
            url: '/comment/' + commentType + '/{{ video_detail.bvid }}',
            success: function (result) {
                if (commentType === 'get_banned_comments') {
                    showBanModal(result);
                } else {
                    showModal(result);
                }
                commentCategory = commentType
            },
            error: function (err) {
                console.error('Error fetching comments: ' + err);
            }
        });
    }

    // 处理封禁按钮点击事件
    function banComment(commentId) {
        // 向后端发送评论ID进行封禁操作
        console.log("封禁评论：" + commentId);
        $.ajax({
            type: 'GET',
            url: '/comment/ban/{{ video_detail.bvid }}/' + commentId,
            success: function (result) {
                alert('成功封禁')
                removeBannedCommentFromModal(commentId)
            },
            error: function (err) {
                console.error('Error fetching comments: ' + err);
            }
        })
        // 在这里可以使用Ajax发送请求到后端进行封禁操作
    }

    function removeBannedCommentFromModal(commentId) {
        var modalComments = document.getElementById("modalnobanComments");
        var commentRows = modalComments.getElementsByTagName("tr");
        for (var i = 0; i < commentRows.length; i++) {
            var currentCommentId = commentRows[i].getElementsByTagName("button")[0].dataset.commentId;
            if (currentCommentId === commentId) {
                modalComments.removeChild(commentRows[i]);
                break;
            }
        }
    }


    // 处理一键封禁按钮点击事件
    function banAllComments() {
        // 向后台发送 AJAX 请求，一键封禁所有评论
        console.log("一键封禁所有评论");
        // 发送AJAX请求到后端服务器
        $.ajax({
            url: '/comment/ban_all/{{ video_detail.bvid }}/' + commentCategory,
            method: 'GET',
            success: function (response) {
                alert('成功封禁所有评论')
                // 处理成功响应
                console.log('成功封禁所有评论');
            },
            error: function (xhr, status, error) {
                // 处理错误响应
                console.log('封禁评论失败: ' + error);
            }
        });
    }

    function showBanModal(comments) {
        var modalComments = document.getElementById("modalbanComments");
        modalComments.innerHTML = "";
        comments.forEach(function (comment) {
            var tr = document.createElement("tr");

            // 添加评论内容
            var tdContent = document.createElement("td");
            tdContent.textContent = comment.content.length > 100 ? comment.content.substring(0, 100) + "..." : comment.content;
            tdContent.title = comment.content;
            tr.appendChild(tdContent);

            // 添加封禁按钮
            var tdAction = document.createElement("td");
            var banButton = document.createElement("button");
            banButton.textContent = "解封";
            banButton.className = "ban-button";
            banButton.onclick = function () {
                unbanComment(comment.rpid);
            };
            tdAction.appendChild(banButton);
            tr.appendChild(tdAction);

            modalComments.appendChild(tr);
        })
        ;
        var modal = document.getElementById("banModal");
        modal.style.display = "block";
    }

    function closebanModal() {
        var modal = document.getElementById("banModal");
        modal.style.display = "none";
    }

    function unbanComment(comment_rpid) {
        // 向后端发送评论ID进行封禁操作
        $.ajax({
            type: 'GET',
            url: '/comment/unban/' + comment_rpid,
            success: function (result) {
                alert('成功解封')
            },
            error: function (err) {
                console.error('Error fetching comments: ' + err);
            }
        })
    }

    function unbanAllComments() {
        // 向后端发送评论ID进行封禁操作
        $.ajax({
            type: 'GET',
            url: '/comment/unban_all/{{ video_detail.bvid }}',
            success: function (result) {
                alert('成功解封所有')
                location.reload()
            },
            error: function (err) {
                console.error('Error fetching comments: ' + err);
            }
        })
    }


    function banVideo() {
        $.ajax({
            type: 'GET',
            url: '/video/ban/{{ video_detail.bvid }}',
            success: function (result) {
                alert('成功封禁视频')
                location.reload()

            },
            error: function (err) {
                console.error('Error fetching comments: ' + err);
            }
        })
    }

    function unbanVideo() {
        $.ajax({
            type: 'GET',
            url: '/video/unban/{{ video_detail.bvid }}',
            success: function (result) {
                alert('成功解封视频')
                location.reload()

            },
            error: function (err) {
                console.error('Error fetching comments: ' + err);
            }
        })
    }


    </script>
{% endblock %}